<template>
	<view class="box">
		<view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
			车辆详情
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text style="margin-left:75rpx">车辆详情</text>
			<!-- #endif -->
		</view>
		<view class="tit_t">
			<view :class="xuan == 1 ? 'xuan view' : 'view'" @click="xuanzhong(1)">全部</view>
			<view :class="xuan == 2 ? 'xuan view' : 'view'" @click="xuanzhong(2)">车身外观</view>
			<view :class="xuan == 3 ? 'xuan view' : 'view'" @click="xuanzhong(3)">仪表中控</view>
			<view :class="xuan == 4 ? 'xuan view' : 'view'" @click="xuanzhong(4)">车厢座椅</view>
		</view>
		<scroll-view class="scroll-view" scroll-y="true" refresher-background="#f5f5f5">
			<view class="cswg" v-if="xuan == 1 || xuan == 2">
				<span>车身外观</span>
				<view class="imageList">
					<image :src="item" @click="ViewImages(swiperList,index)" v-for="(item,index) in swiperList" :key="index+'ss'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="cswg" v-if="xuan == 1 || xuan == 3">
				<span>仪表中控</span>
				<view class="imageList">
					<image :src="item" @click="ViewImages(swiperList1,index)" v-for="(item,index) in swiperList1" :key="index+'yy'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="cswg" v-if="xuan == 1 || xuan == 4">
				<span>车厢座椅</span>
				<view class="imageList">
					<image :src="item" @click="ViewImages(swiperList2,index)" v-for="(item,index) in swiperList2" :key="index+'uu'" mode="aspectFill"></image>
				</view>
			</view>
		</scroll-view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = 106;
	//  #endif
	export default{
		data(){
			return{
				xuan:1,
				statusBarHeight,
				pictureType:"",
				swiperList:[],
				swiperList1:[],
				swiperList2:[],
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"]),
		},
		onLoad(options) {
			this.id = options.id;
			this.ImgData()
		},
		methods:{
			ViewImages(url,index) {
				uni.previewImage({
					urls:url,
					current: url[index],
				});
			},
			// 获取车辆图片
			ImgData(){
				this.$myRequest
					.get("/api/mobile/vehicleOwner/queryVehiclePicturesByPictureType", {
						vehicleId: this.id,
						pictureType:this.pictureType
					})
					.then(res => {
						if (this.xuan==1) {
							this.swiperList=res.vehicleInPicture[0].bodyAppearance.split("|")
							this.swiperList1=res.vehicleInPicture[0].instrumentCentralControl.split("|")
							this.swiperList2=res.vehicleInPicture[0].carSeat.split("|")
						}else if (this.xuan==2) {
							this.swiperList=res.vehicleInPicture[0].bodyAppearance.split("|")
						}else if(this.xuan==3){
							this.swiperList1=res.vehicleInPicture[0].instrumentCentralControl.split("|")
						}else{
							this.swiperList2=res.vehicleInPicture[0].carSeat.split("|")
						}
					});
			},
			xuanzhong(index){
				this.xuan=index
				if (index==1) {
					this.pictureType=""
				}else if (index==2) {
					this.pictureType=2
				}else if(index==3){
					this.pictureType=3
				}else{
					this.pictureType=4
				}
				this.ImgData()
			},
			fanhui() {
				uni.navigateBack({
					delta: 1,
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.scroll-view {
		/* #ifdef MP  */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 22px - 113rpx);
		/* #endif */
		/* #ifdef H5 || APP-PULS */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 113rpx);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 113rpx);
		/* #endif */
	}
	.box {
		width: 100%;
		height:100vh;
		background-color: #fff;
	}
	.tou {
	  position: relative;
	  width: 100%;
	  // height: 88rpx;
	  text-align: center;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;
		/* #endif */
	  line-height: 88rpx;
	  font-size: 36rpx;
	  color: #fff;
	  background-color: #64b6a8;
	
	  .image1 {
	    position: absolute;
	    width: 32rpx;
	    height: 32rpx;
	    // top: 116rpx;
	    left: 30rpx; 
	  }
	
	  .image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			bottom: 16rpx!important;
			right: 30rpx;
			/* #ifdef MP-WEIXIN */
			position: initial;
			margin-left: auto;
			margin-right: 200rpx;
			/* #endif */
	  }
	}
	.tit_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 32rpx 30rpx 24rpx 30rpx;
		.view {
			width: 150rpx;
			height: 57rpx;
			background-color: #f2f2f2;
			border-radius: 8rpx;
			text-align: center;
			line-height: 57rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
	
		.xuan {
			background-color: #64b6a8;
			color: #fff;
		}
	}
	.cswg{
		margin:30rpx;
		span{
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}
		.imageList{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 20rpx;
			image{
				width: 330rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>